<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>外边距典型应用-块级盒子水平居中</title>
	<style>
		.header {
			width: 900px;
			height: 200px;
			background-color: pink;
			
			/* 以下三种方法都可以使块级盒子水平居中,只要使左右是auto即可. */
			/* margin-left: auto;
			margin-right: auto;

			margin: auto; */

			margin: 100px auto;
		}
	</style>
</head>

<body>
	<div class="header"></div>
</body>

</html>